<form action="?op=add_equipe" method="post" id="form-cad-equipe" onsubmit="selectAllRight(); return true;">
    <div class="tool-bar-form" form="form-cad-equipe">
        <div onclick="openAddSpaceForm(this)" id='add-btn-tool' class="tool-button add-btn-tool-box"> Adicionar </div>
        <div onclick="closeAddSpaceForm(this); moveAllToLeft();" class="tool-button cancel-btn-tool-box"> Cancelar </div>
    </div>
    <div class="hidden add-space-this-form">
    <input type="hidden" name="for-update-id" id="for-update-id"/>
    <fieldset>    
        <legend>&nbsp;informações sobre a equipe&nbsp;</legend>
        <label> Nome: <input type="text" name="nome" class="input text-input" id="nome-equipe"/> </label>
        <?php echo hsep(); ?>
        <label>  Loja: 
            <select name="loja" class="input select-input gray-grad-back" 
                    id="loja-equipe" required onchange="loadFuncionarios(this.value)">
                <?php
                include_once CONTROLLERS."loja.php";
                $loja_controller = new LojaController();
                if($_SESSION[SESSION_PERFIL_FUNC] == PERFIL_ADMINISTRADOR){
                    $lojas = $loja_controller->getAllLojas(false);
                } else  {
                    $lojas = array(
                        $loja_controller->getLoja( $_SESSION[SESSION_LOJA_FUNC])
                    );
                }
                foreach($lojas as $loja){ ?>
                    <option value="<?php echo $loja->id; ?>"
                    <?php if($loja->id == $_SESSION[SESSION_LOJA_FUNC]) echo "selected"; ?>
                    ><?php echo $loja->sigla; ?></option>
                <?php } ?>
            </select>
        </label>
        <?php echo hsep(); ?>
        <label>  Líder: 
            <select name="lider" class="input select-input gray-grad-back" id="lider-equipe" required>
                <option value="">SEM LÍDER</option>
            </select>
        </label>
        <?php echo vsep(); ?>
        <div class="select-func">
            <label for="right-funcs">Funcionários:</label>
            <br/>
            <select multiple size="10" id="left-funcs"></select>
        </div>
        <?php echo hsep(); ?>
        <div id="control-select">
            <input type="button" class="with-default btn" value=">" dvalue=">" onclick="moveToRight()"/><br/>
            <input type="button" class="with-default btn" value="<" dvalue="<" onclick="moveToLeft()"/><br/>
            <input type="button" class="with-default btn" value="<<" dvalue="<<" onclick="moveAllToLeft()"/>
        </div>
        <?php echo hsep(); ?>
        <div class="select-func">
            <label for="right-funcs">Equipe:</label>
            <br/>
            <select multiple size="10" id="right-funcs" name="integrantes[]" required> </select>
        </div>
        <p style="text-align: right;"> 
            <input type="submit" class="btn submit green3-grad-back" name="submit" value="Cadastrar"/>
        </p>
    </fieldset>
    </div>
</form>
<style>
.select-func {display: inline-block;width: 30%}
.select-func select {width: 100%}
#control-select {
    vertical-align: top;
    margin-top: 20px;
    display: inline-block;
    text-align: center;
}
#control-select input {margin-bottom: 7.5px;}
#form-cad-equipe .text-input{ text-transform: uppercase; } 
</style>
<script> 
var leftFuncs, rightFuncs;
$(function(){
    leftFuncs = document.getElementById('left-funcs');
    rightFuncs = document.getElementById('right-funcs');
    sortSelectFuncs();
    sortSelect(document.getElementById('lider-equipe'));
});
function moveToRight() {
    while(leftFuncs.selectedOptions.length){
        rightFuncs.add(leftFuncs.selectedOptions[0]);
    }
    sortSelectFuncs();
}
function moveToLeft() {
    while(rightFuncs.selectedOptions.length){
        leftFuncs.add(rightFuncs.selectedOptions[0]);
    }
    sortSelectFuncs();
}
function moveAllToLeft() {
    while(rightFuncs.options.length){
        leftFuncs.add(rightFuncs.options[0]);
    }
    sortSelectFuncs();
}
function itemWithValue(value, model){
    for(var i = 0, l = model.options.length; i < l; i++){
        if(model.options[i].value == value){
            return model.options[i];
        }
    }
    return undefined;
}
var callBackLoad = false;
function loadFuncionarios(idLoja){
    var opDefault = document.createElement("option");
    opDefault.value = "";
    opDefault.innerHTML = "SEM LÍDER";
    $("#lider-equipe").html( opDefault );
    $("#left-funcs").attr("disabled", true);
    $("#left-funcs").html("<option>CARREGANDO FUNCIONARIOS...</option>");
    $("#right-funcs").html("");
    
    if(idLoja == "") return;
    
    var url = "ajax.php?code=8802&sa=1&loja="+idLoja;
    
    get(url, function(data){
        if(data.code == "0"){
            $("#left-funcs").attr("disabled", false);
            $("#left-funcs").html("");
            var funcionrios = data.data;
            for(var i = 0; i < funcionrios.length; i++){
                var op = document.createElement("option");
                op.innerHTML = funcionrios[i].nome; 
                op.value = funcionrios[i].id;
                var cop = document.createElement("option");
                cop.innerHTML = funcionrios[i].nome; 
                cop.value = funcionrios[i].id;
                $("#lider-equipe").append( op );
                $("#left-funcs").append( cop );
            }
            if(callBackLoad){
                callBackLoad();
                callBackLoad = false;
            }
            sortSelectFuncs();
        }
    });
}
function openEditEquipeMode(idEquipe){
    var url = "ajax.php?code=5037&equipe="+idEquipe;
    get(url, function(data){
        if(data.code == "0"){
            $("#for-update-id").val(data.data.id);
            $("#nome-equipe").val(data.data.nome);
            $("#loja-equipe").val(data.data.loja);
            callBackLoad = function(){
                $("#lider-equipe").val(data.data.lider);
                for(var j = 0, m = data.data.integrantes.length; j < m; j++){
                    var integrante = data.data.integrantes[j];
                    var option = itemWithValue(integrante.funcionario, leftFuncs);
                    if(option != undefined){
                        rightFuncs.add(option);
                    }
                }
            };
            loadFuncionarios(data.data.loja);
            openAddSpaceForm(document.getElementById("add-btn-tool"), true);
       } else 
           badAlert(data.message);
    });
}
function sortSelect(selElem) {
    var tmpAry = new Array();
    for (var i=0;i<selElem.options.length;i++) {
        tmpAry[i] = new Array();
        tmpAry[i][0] = selElem.options[i].text;
        tmpAry[i][1] = selElem.options[i].value;
    }
    tmpAry.sort();
    while (selElem.options.length > 0) {
        selElem.options[0] = null;
    }
    for (var i=0;i<tmpAry.length;i++) {
        var op = new Option(tmpAry[i][0], tmpAry[i][1]);
        selElem.options[i] = op;
    }
}
function sortSelectFuncs(){
    sortSelect(leftFuncs);
    sortSelect(rightFuncs);
}
function selectAllRight(){
    for (var i=0;i<rightFuncs.options.length;i++) {
        rightFuncs.options[i].selected = true;
    }
}
</script>